<!DOCTYPE html>
<html>
<head>
	<title>Leaflet debug page</title>

<link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet-src.js"></script>
<!-- 	<link rel="stylesheet" href="../Leaflet/dist/leaflet.css" /> -->
<!-- 	<script type="text/javascript" src="../Leaflet/dist/leaflet-src.js"></script> -->

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<script type="text/javascript" src="L.TileLayer.NoGap.js"></script>
	<style>
	#map {
/* 		margin: 256px; */
/* 		width: auto; */
		overflow: hidden;
		width: 100vw;
		height: calc( 100vh - 100px );
		background: red;
	}

/*	canvas {
		border: 1px dotted black;
		margin-top: -1px;
		margin-left:-1px;
	}*/

	div.tile-coords128 {
		line-height: 128px;
		text-align: center;
		color: red;
		font-size: 12.8px;
		max-width: 128px;
	}

	div.tile-coords256 {
		line-height: 256px;
		text-align: center;
		color: red;
		font-size: 25.6px;
		max-width: 256px;
	}

	body { margin: 0; }

/* 	Make the zoom animation slower */

/*.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 5s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 5s cubic-bezier(0,0,0.25,1);
	     -o-transition:      -o-transform 5s cubic-bezier(0,0,0.25,1);
	        transition:         transform 5s cubic-bezier(0,0,0.25,1);
	}
*/


	</style>
</head>
<body>

<!-- 	<p>Stuff to test tilelayers as canvases to prevent the 1px tile gap.</p> -->

	<div>
		<button onclick='map.zoomIn(0.1)'> + 0.1 </button>
		<button onclick='map.zoomOut(0.1)'> - 0.1 </button>
		<span id='zoomlevel' style='width: 5em; display:inline-block'></span>
		<button onclick='toggleOverflow()'> Overflow </button>
<!-- 		<button onclick='toggleLayers()'> OSM/debug </button> -->
	</div>
	<div id="map" class="map"></div>

	<script type="text/javascript">

		var tileSize = 128;

// 		var DebugTileLayer = L.TileLayer.extend({
		var DebugTileLayer = L.TileLayer.extend({
			getTileUrl: function getTileUrl(coords) {

				var canvas = document.createElement('canvas');

				var tileSize = this.getTileSize();
				canvas.setAttribute('width', tileSize.x);
				canvas.setAttribute('height', tileSize.y);

				var ctx = canvas.getContext('2d');
				ctx.fillStyle = 'rgba(245,245,220,0.3)';
				ctx.fillRect(0, 0, tileSize.x, tileSize.y);

				ctx.strokeStyle = 'green';
				ctx.fillStyle = 'green';

				ctx.strokeRect(2, 2, tileSize.x - 4, tileSize.y - 4);

				ctx.font = (tileSize.x / 10) + "px Sans"
				ctx.fillText( coords.x + "," + coords.y + "," + coords.z,
					tileSize.x / 4 + Math.random() * 10,
					tileSize.y * 3/4 + Math.random() * 10);

// 				return tile;
				return canvas.toDataURL();
			}
		});

		var DebugErrorsTileLayer = L.TileLayer.extend({
			getTileUrl: function getTileUrl(coords) {
				if (Math.random() < 0.05) { return "Error!!"; }

				return DebugTileLayer.prototype.getTileUrl.call(this, coords);
			}
		});

		var mapopts =  {
			zoomSnap: 0.1
		};

		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			osm = new L.TileLayer(osmUrl, {
// 			osm = new L.TileLayer(osmUrl, {
				maxZoom: 18,
				attribution: osmAttrib,
				keepBuffer: 0,
// 				zIndex: -10
// 				tileSize: tileSize
			});

		var kittenUrl = 'https://placekitten.com/256/256?image={s}',
			kittens = new L.TileLayer(kittenUrl, {
				maxZoom: 18,
				attribution: "Placekitten",
				keepBuffer: 0,
				tileSize: tileSize,
				subdomains: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
			});

		var debug = new DebugTileLayer(null, {
			tileSize: tileSize,
			keepBuffer: 0,
			zIndex: 10
		});

		var debugWithErrors = new DebugErrorsTileLayer(null, {
			tileSize: tileSize,
			keepBuffer: 0,
			zIndex: 10
		});

		// Hack to provide some synthetic delay
		debug.createTile = debugWithErrors.createTile = function(coords, done){
			var tile = document.createElement('img');
			tile.src = this.getTileUrl(coords);
			setTimeout(done, Math.random()*5000);
			return tile;
		};

		var map = L.map('map', mapopts).setView([0,0],0);

		map.addLayer(osm);
// 		map.addLayer(kittens);
// 		map.addLayer(debug);

		var gridDebug = L.gridLayer({
			attribution: 'Grid Layer',
// 			tileSize: L.point(150, 80),
			tileSize: tileSize
		});

		var gridOsm = L.gridLayer({
			attribution: 'Grid Layer',
// 			tileSize: L.point(150, 80),
// 			tileSize: tileSize
		});

		gridDebug.createTile = function (coords) {
			var tile = L.DomUtil.create('div', 'tile-coords128');
			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
			return tile;
		};
		gridOsm.createTile = function (coords) {
			var tile = L.DomUtil.create('div', 'tile-coords256');
			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
			return tile;
		};

		map.addLayer(gridOsm);

		function toggleOverflow(){
			var c = map.getContainer();
			if (c.style.overflow === 'visible') {
				c.style.overflow = 'hidden';
				c.style.margin = 0;
				c.style.height = 'calc( 100vh - 100px )';
				c.style.width = '100vw'
			} else {
				c.style.overflow = 'visible';
				c.style.margin = '256px';
				c.style.height = 'calc( 100vh - 612px )';
				c.style.width = 'calc( 100vw - 512px )'
			}
			map.invalidateSize();
		}

		map.on('baselayerchange', function(ev){
			if (ev.layer === debug || ev.layer === debugWithErrors) {
				map.getContainer().style.background = '#ddd';
			} else {
				map.getContainer().style.background = 'red';
			}
		});

		map.on('zoomend', function(){
			document.getElementById('zoomlevel').innerHTML = map.getZoom();
		});

		L.control.layers({
			OSM: osm,
			Kittens: kittens,
			"Canvas w/ coordinates": debug,
			"Canvas w/ coordinates & errors": debugWithErrors
		},{},{collapsed: false}).addTo(map);

		debugWithErrors.on('tileerror', console.warn);

	</script>
</body>
</html>

